<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
		<meta http-equiv="X-UA-Compatible" content="IE=9" />
		<meta name="renderer" content="webkit">
		<title>入库单编辑</title>
		<link rel="stylesheet" type="text/css" href="../../css/cm-default.css"  />
		<link rel="stylesheet" type="text/css" href="../../lib/ligerUI/skins/Aqua/css/ligerui-all.css" />
		<link rel="stylesheet" type="text/css" href="../../lib/select2/css/select2.css" />
<!-- 		<link rel="stylesheet" type="text/css" href="../../lib/ligerUI/skins/AquaCustomer/css/ligerui-all.css" /> -->
<!-- 		<link rel="stylesheet" type="text/css" href="../../lib/ligerUI/skins/Gray2014/css/all.css" /> -->
		<link rel="stylesheet" type="text/css" href="../../lib/ligerUI/skins/ligerui-icons.css" />

<!-- 		<link rel="stylesheet" href="../../lib/jquerySpin/smartspinner.css"> -->
		<link rel="stylesheet" type="text/css" href="../../lib/bootstrap//css/bootstrap.css"/>
		<link type="text/css" rel="stylesheet" href="../../css/public.css"  />
		<link type="text/css" rel="stylesheet" href="../../css/pub.css"  />
<!-- 		<script src="../../lib/jquery/jquery-1.9.1.min.js" type="text/javascript"></script> -->
		<script src="../../lib/jquery/jquery-1.9.1.min.js" type="text/javascript"></script>
		<script src="../../lib/select2/js/select2.full.js" type="text/javascript"></script>
		<script src="../../lib/ligerUI/js/ligerui.all.js" type="text/javascript"></script>
<!-- 		<script src="../../lib/jquerySpin/smartspinner.js"></script> -->
		<script src="../../lib/My97DatePicker/WdatePicker.js"></script>
		<script src="../../lib/jquery-validation/jquery.validate.min.js" type="text/javascript"></script>
		<script src="../../lib/jquery-validation/jquery.metadata.js" type="text/javascript"></script>
		<script src="../../lib/jquery-validation/messages_cn.js" type="text/javascript"></script>
		
		<script type="text/javascript" src="../../lib/bootstrap/js/bootstrap.js" ></script>
	    <!--解决IE实现对媒体查询（media query）的支持-->
		<!--[if lt IE 9]>
		<script type="text/javascript" src="../../lib/ie/respond.src.js"></script>
		<![endif]-->
		<script type="text/javascript" src="../../js/pub.js"></script>
		
 		
 		<script type="text/javascript">
 		var testSelectTag;
		$(function(){
		    $("#form_core").height($(".form_tab").height()-$("#form_option").outerHeight());
		    var data = [
		       {id:1,text:"主席"},
		       {id:2,text:"研发中心"},
		       {id:3,text:"销售部"},
		       {id:4,text:"市场部"},
		       {id:5,text:"顾问组"}
            ];
		    testSelectTag = $("#DepartmentID").select2({
				width:'100%',
				placeholder: $('[for="DepartmentID"]').html(),
				allowClear: true,
				tags: true,
				data:data
			});
		});
		/*明细表单，表格的形式*/
		var EmployeeData = { 
			Rows: [
				{ "__status": null, "ID": 1, "DepartmentID": 3, "RealName": "fewf", 
				"DepartmentName": "销售部", "Sex": 1, "Age": 2433, "IncomeDay": new Date(1301356800000), 
				"Phone": "159244332", "Address": "变为不为恶" 
				}, 
				{ "__status": null, "ID": 2, "DepartmentID": 1, "RealName": "李三34", 
				"DepartmentName": "主席", "Sex": 2, "Age": 23, "IncomeDay": new Date(1301299200000), 
				"Phone": "2323232323", "Address": "3434" 
				}, 
				{ "__status": null, "ID": 3, "DepartmentID": 3, "RealName": "吴彬3", 
				"DepartmentName": "销售部", "Sex": 2, "Age": 26, "IncomeDay": new Date(1294128000000), 
				"Phone": "159244332", "Address": "1311飞屋服务费3434343433434" 
				}, 
				{ "__status": null, "ID": 5, "DepartmentID": 2, "RealName": "吴久", 
				"DepartmentName": "研发中心", "Sex": 2, "Age": 29, "IncomeDay": new Date(1288569600000), 
				"Phone": "159244332", "Address": "3444444" 
				}
			], Total: 4 };
		
        //$(f_initGrid);
        var manager, g;
        function f_initGrid()
        { 
           g =  manager = $("#pop_div #form_table").ligerGrid({
                columns: [
	                { display: '名字', name: 'RealName',width: '30%'},
	                { display: '性别', width: '10%', name: 'Sex',textField:'SexName',type:'int',
	                    render: function (item)
	                    {
	                        if (parseInt(item.Sex) == 1) return '男';
	                        if (parseInt(item.Sex) == 2) return '女';
	                        return '';
	                    }
	                },
	                { display: '年龄', name: 'Age', width: '10%', type: 'int', editor: { type: 'int'} }, 
	                { display: '部门', name: 'DepartmentID',textField:'DepartmentName', width: '40%', isSort: false}
                ],
                onSelectRow: function (rowdata, rowindex)
                {
                    $("#txtrowindex").val(rowindex);
                },
                enabledEdit: true,clickToEdit: true, isScroll: false,  
                data:EmployeeData,
                checkbox: true, //是否显示复选框
                //width: '98%',
                //showNodata: true, //添加无数据展示效果
                pageSize: 20, //每页行数
                //url: url, //Ajax 数据从这里来。
                //parms: elem.form.serializeObject(), //ajax查询参数
                alternatingRow: true, //是否附加奇偶行效果行
                //rownumbers: true,
                //enabledSort: false,
                usePager:true,
                editorTopDiff:2,
                editorLeftDiff:2
            });   
        }
        //弹窗
        $(function(){
        	$('#pop_add_button').bind('click',function(){
				var data = manager.getSelectedRow();
				var pop_add_form = $('#form_content');
			    pop_add_form.find("input").each(function(i){
				  $(this).val(data[""+$(this).attr('name')+""]);
			    });
			    pop_add_form.find("select").each(function(i){
				  $(this).val(data[""+$(this).attr('name')+""]);
				  testSelectTag.val(data[""+$(this).attr('name')+""]).trigger("change");
			    });
			});
        })
        function help_pop(){
			$('#addMx_Modal').on('shown.bs.modal', function () {
			  f_initGrid();
			});
			$('#addMx_Modal').modal('show');
		}
		function display_help(){
			$("#help").css("display","inline");
		}
		function help_hidden(){
			
		}
	</script>
	</head>
	
	<body>
	    <div class="form_tab contextHeight">
			<div id="form_option" class="contextWidth form_option">
				<div class="contextWidth form_option_content">
				</div>
			</div>
			<div id="form_core" class="form_core">
				<div style="" class="form_header">
					<div class="form_header_content">
					</div>
				</div>
				<div id="formContent" class="formContent">
					<div class="form_core_content">
						<div id="form_content">
							<form class="form-horizontal" name="basic-form" method="post" id="basic_form" data-validate="{}">
								<div class="form_core_content_header">
									<h3>员工信息&nbsp;/</h3>
								</div>
								<div class="form_hidden">
									<input type="hidden" id="picking_id" />
								</div>
								<div class="form-group">
								    <label for="RealName" class="col-sm-1 control-label">名字：</label>
									<div class="col-sm-3 col-sm-offset-1">
										<div style="position:relative;">
											<input name="RealName" id="RealName" class="form-control input-sm"/>
											<span id="help" class="input-sm help_icon" onclick="help_pop()">
												<span class="glyphicon glyphicon-option-horizontal"></span>
											</span>
										</div>
									</div>
									<div class="col-sm-1"></div>
									<label for="Sex" class="col-sm-1 control-label">性别：</label>
									<div class="col-sm-3 col-sm-offset-1">
									   <select name="Sex" id="Sex" class="form-control input-sm">
									        <option value="1">男</option>
											<option value="2">女</option>
								    	</select>
									</div>
								</div>
								<div class="form-group">
								    <label for="Age" class="col-sm-1 control-label">年龄：</label>
								    <div class="col-sm-3 col-sm-offset-1">
								      <input type="text" name="Age" id="Age" class="form-control input-sm" placeholder="年龄"/>
								    </div>
								    <div class="col-sm-1"></div>
								    <label for="DepartmentID" class="col-sm-1 control-label">部门：</label>
									<div class="col-sm-3 col-sm-offset-1">
										<select name="DepartmentID" id="DepartmentID" class="form-control input-sm" multiple="multiple">
<!-- 									        <option value="1">主席</option> -->
<!-- 											<option value="2">研发中心</option> -->
<!-- 											<option value="3">销售部</option> -->
<!-- 											<option value="4">市场部</option> -->
<!-- 											<option value="5">顾问组</option> -->
								    	</select>
									</div>
								</div>
							</form>
						</div>
						<br />
						<div>
							<div id="pop_div">
					   			<div class="modal fade" id=addMx_Modal tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
								  <div class="modal-dialog" role="document">
								    <div class="modal-content">
								      <div class="modal-header">
								        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
								        <h4 class="modal-title" id="exampleModalLabel">帮助:</h4>
								      </div>
								      <div class="modal-body">
								        <div id="form_table">
								        
								        </div>
								      </div>
								      <div class="modal-footer">
								        <button type="button" id="pop_add_button" class="btn btn-primary" data-dismiss="modal">添加</button>
								        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
								      </div>
								    </div>
								  </div>
								</div>
					   		</div>
						</div>
						<br />
					</div>
				</div>
			</div>
	    </div>
	  </body>
</html>
